<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基金净值展示系统</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .content {
            padding: 30px;
        }
        
        .fund-input {
            margin-bottom: 30px;
            text-align: center;
        }
        
        .input-group {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            background: #f8f9fa;
            padding: 15px 25px;
            border-radius: 50px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .input-group label {
            font-weight: 600;
            color: #333;
        }
        
        .input-group input {
            border: none;
            background: white;
            padding: 10px 15px;
            border-radius: 25px;
            font-size: 16px;
            width: 150px;
            text-align: center;
        }
        
        .input-group button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: transform 0.2s;
        }
        
        .input-group button:hover {
            transform: translateY(-2px);
        }
        
        .fund-info {
            display: none;
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            border-left: 5px solid #4facfe;
        }
        
        .fund-info h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.5em;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .info-item {
            background: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .info-item strong {
            color: #667eea;
            display: block;
            margin-bottom: 5px;
        }
        
        .chart-container {
            display: none;
            background: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .chart-container h3 {
            color: #333;
            margin-bottom: 20px;
            text-align: center;
            font-size: 1.5em;
        }
        
        .chart-wrapper {
            position: relative;
            height: 400px;
            margin-bottom: 20px;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 50px;
            color: #667eea;
            font-size: 1.2em;
        }
        
        .error {
            display: none;
            background: #ffe6e6;
            color: #d63031;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            border-left: 5px solid #d63031;
        }
        
        .chart-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            gap: 10px;
        }
        
        .tab-button {
            background: #f8f9fa;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .tab-button.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .tab-button:hover {
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>基金净值展示系统</h1>
            <p>实时查看基金净值走势和详细信息</p>
        </div>
        
        <div class="content">
            <div class="fund-input">
                <div class="input-group">
                    <label for="fundCode">基金代码:</label>
                    <input type="text" id="fundCode" placeholder="如: 000001" value="000001">
                    <button onclick="loadFundData()">查询基金</button>
                </div>
            </div>
            
            <div class="loading" id="loading">
                <div>正在加载基金数据...</div>
            </div>
            
            <div class="error" id="error"></div>
            
            <div class="fund-info" id="fundInfo">
                <h3>基金基本信息</h3>
                <div class="info-grid" id="infoGrid">
                    <!-- 基金信息将在这里动态生成 -->
                </div>
            </div>
            
            <div class="chart-container" id="chartContainer">
                <h3>净值走势图</h3>
                <div class="chart-tabs">
                    <button class="tab-button active" onclick="switchChart('netWorth')">单位净值</button>
                    <button class="tab-button" onclick="switchChart('totalWorth')">累计净值</button>
                    <button class="tab-button" onclick="switchChart('return')">累计收益率</button>
                </div>
                <div class="chart-wrapper">
                    <canvas id="navChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let currentChart = null;
        let fundData = null;
        let currentChartType = 'netWorth';
        
        // 加载基金数据
        async function loadFundData() {
            const fundCode = document.getElementById('fundCode').value.trim();
            if (!fundCode) {
                showError('请输入基金代码');
                return;
            }
            
            showLoading(true);
            hideError();
            hideFundInfo();
            hideChart();
            
            try {
                // 使用JSONP方式获取数据
                const data = await fetchFundDataViaJSONP(fundCode);
                fundData = data;
                
                displayFundInfo(data);
                displayChart(data, currentChartType);
                
            } catch (error) {
                console.error('获取基金数据失败:', error);
                showError('获取基金数据失败，请检查基金代码是否正确');
            } finally {
                showLoading(false);
            }
        }
        
        // 获取基金数据（使用模拟数据演示功能）
        function fetchFundDataViaJSONP(fundCode) {
            return new Promise((resolve, reject) => {
                // 由于跨域限制，使用模拟数据演示功能
                setTimeout(() => {
                    const mockData = generateMockFundData(fundCode);
                    resolve(mockData);
                }, 1000); // 模拟网络延迟
            });
        }
        
        // 生成模拟基金数据
        function generateMockFundData(fundCode) {
            const startDate = new Date('2020-01-01').getTime();
            const endDate = new Date().getTime();
            const days = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
            
            const netWorthTrend = [];
            const acWorthTrend = [];
            const grandTotal = [];
            
            let baseNetWorth = 1.0;
            let baseTotalWorth = 1.0;
            let totalReturn = 0;
            
            for (let i = 0; i <= days; i += 7) { // 每周一个数据点
                const currentDate = startDate + (i * 24 * 60 * 60 * 1000);
                
                // 模拟净值波动
                const change = (Math.random() - 0.5) * 0.02; // ±1%的随机波动
                baseNetWorth = Math.max(0.1, baseNetWorth * (1 + change));
                baseTotalWorth = Math.max(0.1, baseTotalWorth * (1 + change));
                totalReturn = ((baseNetWorth - 1) * 100);
                
                netWorthTrend.push({
                    x: currentDate,
                    y: parseFloat(baseNetWorth.toFixed(4)),
                    equityReturn: change,
                    unitMoney: ""
                });
                
                acWorthTrend.push({
                    x: currentDate,
                    y: parseFloat(baseTotalWorth.toFixed(4))
                });
                
                grandTotal.push({
                    x: currentDate,
                    y: parseFloat((totalReturn / 100).toFixed(4))
                });
            }
            
            const fundNames = {
                '000001': '华夏成长混合',
                '110022': '易方达消费行业股票',
                '161725': '招商中证白酒指数(LOF)A',
                '320007': '诺安成长混合',
                '110011': '易方达中小盘混合'
            };
            
            const fundName = fundNames[fundCode] || `模拟基金${fundCode}`;
            
            return {
                Data_netWorthTrend: netWorthTrend,
                Data_ACWorthTrend: acWorthTrend,
                Data_grandTotal: grandTotal,
                fS_name: fundName,
                fS_code: fundCode,
                fund_type: '混合型',
                fund_establishdate: '2020-01-01',
                fund_scale: '100.50亿元',
                fund_manager: '张三',
                fund_managementfeeratio: '1.50%',
                fund_custodianfeeratio: '0.25%'
            };
        }
        
        // 显示基金基本信息
        function displayFundInfo(data) {
            const infoGrid = document.getElementById('infoGrid');
            const fundInfo = document.getElementById('fundInfo');
            
            // 提取基金基本信息
            const info = {
                '基金名称': data.fS_name || '未知',
                '基金代码': data.fS_code || '未知',
                '基金类型': data.fund_type || '未知',
                '成立日期': data.fund_establishdate || '未知',
                '基金规模': data.fund_scale || '未知',
                '基金经理': data.fund_manager || '未知',
                '管理费率': data.fund_managementfeeratio || '未知',
                '托管费率': data.fund_custodianfeeratio || '未知',
                '最新净值': data.Data_netWorthTrend && data.Data_netWorthTrend.length > 0 ? 
                           data.Data_netWorthTrend[data.Data_netWorthTrend.length - 1].y : '未知',
                '净值日期': data.Data_netWorthTrend && data.Data_netWorthTrend.length > 0 ? 
                           formatDate(data.Data_netWorthTrend[data.Data_netWorthTrend.length - 1].x) : '未知'
            };
            
            infoGrid.innerHTML = '';
            Object.entries(info).forEach(([key, value]) => {
                const item = document.createElement('div');
                item.className = 'info-item';
                item.innerHTML = `<strong>${key}:</strong> ${value}`;
                infoGrid.appendChild(item);
            });
            
            fundInfo.style.display = 'block';
        }
        
        // 显示图表
        function displayChart(data, chartType) {
            const chartContainer = document.getElementById('chartContainer');
            const ctx = document.getElementById('navChart').getContext('2d');
            
            if (currentChart) {
                currentChart.destroy();
            }
            
            let chartData, label, color;
            
            switch (chartType) {
                case 'netWorth':
                    chartData = data.Data_netWorthTrend || [];
                    label = '单位净值';
                    color = 'rgb(75, 192, 192)';
                    break;
                case 'totalWorth':
                    chartData = data.Data_ACWorthTrend || [];
                    label = '累计净值';
                    color = 'rgb(255, 99, 132)';
                    break;
                case 'return':
                    chartData = data.Data_grandTotal || [];
                    label = '累计收益率(%)';
                    color = 'rgb(54, 162, 235)';
                    break;
            }
            
            if (!chartData || chartData.length === 0) {
                showError(`${label}数据不可用`);
                return;
            }
            
            const labels = chartData.map(item => formatDate(item.x));
            const values = chartData.map(item => chartType === 'return' ? item.y * 100 : item.y);
            
            currentChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: label,
                        data: values,
                        borderColor: color,
                        backgroundColor: color + '20',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            display: true,
                            title: {
                                display: true,
                                text: '日期'
                            },
                            ticks: {
                                maxTicksLimit: 10
                            }
                        },
                        y: {
                            display: true,
                            title: {
                                display: true,
                                text: label
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top'
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    interaction: {
                        mode: 'nearest',
                        axis: 'x',
                        intersect: false
                    }
                }
            });
            
            chartContainer.style.display = 'block';
        }
        
        // 切换图表类型
        function switchChart(chartType) {
            if (!fundData) return;
            
            currentChartType = chartType;
            
            // 更新按钮状态
            document.querySelectorAll('.tab-button').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            displayChart(fundData, chartType);
        }
        
        // 格式化日期
        function formatDate(timestamp) {
            const date = new Date(timestamp);
            return date.toLocaleDateString('zh-CN');
        }
        
        // 显示/隐藏加载状态
        function showLoading(show) {
            document.getElementById('loading').style.display = show ? 'block' : 'none';
        }
        
        // 显示错误信息
        function showError(message) {
            const errorDiv = document.getElementById('error');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
        }
        
        // 隐藏错误信息
        function hideError() {
            document.getElementById('error').style.display = 'none';
        }
        
        // 隐藏基金信息
        function hideFundInfo() {
            document.getElementById('fundInfo').style.display = 'none';
        }
        
        // 隐藏图表
        function hideChart() {
            document.getElementById('chartContainer').style.display = 'none';
        }
        
        // 页面加载完成后自动加载默认基金数据
        window.addEventListener('load', function() {
            loadFundData();
        });
        
        // 回车键查询
        document.getElementById('fundCode').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                loadFundData();
            }
        });
    </script>
</body>
</html>